<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for遍历对象</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<table border="1" cellspacing="0">
				<thead>
					<tr>
						<th>序号</th>
						<th>ID</th>
						<th>登陆名称</th>
						<th>真实名称</th>
						<th>性别</th>
						<th>出生日期</th>
						<th>描述</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(u, index) in arr">
						<td>{{index + 1}}</td>
						<td>{{u.id}}</td>
						<td>{{u.loginName}}</td>
						<td>{{u.realName}}</td>
						<td>{{u.gender}}</td>
						<td>{{u.birth}}</td>
						<td>{{u.desc}}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el: '#app',
			data: {
			    arr: [{
					id: 11,
					loginName:'zhangsan',
					realName:'zhangsan',
					gender:'男',
					birth:'1992-12-12',
					desc:'good boy!'
					}, {
                    id: 12,
                    loginName:'lisi',
                    realName:'lisi',
                    gender:'男',
                    birth:'1992-10-10',
                    desc:'good boy!'
                }, {
                    id: 13,
                    loginName:'wangwu',
                    realName:'wangwu',
                    gender:'女',
                    birth:'1991-08-08',
                    desc:'good girl!'
                }, {
                    id: 14,
                    loginName:'zhaoliu',
                    realName:'zhaoliu',
                    gender:'女',
                    birth:'1993-11-11',
                    desc:'good girl!'
                }]
			}
		});
	</script>
</html>
